<template>
  <div  class="layer-ctrl" >
    <div  class="box yb">
      <el-tree
        :data="data"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="defaultProps">
      </el-tree>
      <span
        class="span el-icon-close"
        @click="layerCtrl"
        style="font-size:.12rem;position: absolute; right: 15px; top: 15px; cursor: pointer"
      ></span>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    layerCtrl:Boolean
  },
  data(){
    return{
      data: [
        {
          id: 1,
          label: '第一个',
          
        },
        {
          id: 2,
          label: '第二个',
        }],
    }
  },
  methods:{
    layerCtrl(){
      this.layerCtrl = !this.layerCtrl
      this.$emit("changeLayerCtrl",this.layerCtrl)
    }
  }
};
</script>
<style >
.toolbar .el-menus .el-dropdown {
  color: #fff;
}
.layer-ctrl .el-tree{
  background:transparent;
  padding-top:40px;
}
.layer-ctrl .el-tree-node__label {
    color: #9cc6ff;
}
.layer-ctrl .el-tree-node__content:hover {
    background: hsla(0,0%,100%,.3)!important;
}
</style>
<style lang="stylus" scoped>
@import '../../assets/css/varibles.styl';

.layer-ctrl {
  position: fixed;
  right: 3.6rem;
  top: 1.52rem;
  width: 3.6rem;
  height: 4.6rem;
  z-index: 2;
  .box{
    width: 100%;
    height: 100%;
    background: url("");
    position: relative;
    z-index: 0;
  }
  
}
</style>